<!doctype html>
<html>
	<head>
		<title>mchub</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.2/font/bootstrap-icons.css">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		{% load static %}
		<nav class="navbar navbar-light bg-light">
			<div class="navbar-header">
				<a href="/" class="navbar-brand">
					<img src="{% static 'images/icon.png' %}" class="rounded-sm" width="30" height="30">
					mchub
				</a>
			</div>
			<form class="form-inline">
				<button class="btn btn-link"><a href="/">Explore</a></button>
				<div class="dropdown">
					<a class="dropdown-toggle" href="#" role="button" id="u" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<b class="bi bi-people-circle" style="font-size: 120%"></b>
					</a>
					<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="u">
						<a href="#" class="dropdown-item"><span>Signed in as<br>
						<b>{{ username }}</b></span></a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Settings</a>
						<a class="dropdown-item" href="/logout/">Log out</a>
					</div>
				</div>
			</form>
		</nav>
			<div class="row mw-100">
				<div class="col-4 m-1 p-3">
					<p align="center" class="text-secondary">@{{ username }}</p>
					<hr>
					<div class="clearfix p-2">
						<b class="float-left p-1">Projects</b>
						<a href="/new/"><button class="btn btn-sm btn-primary float-right">
							&nbsp;New&nbsp;
						</button></a>
					</div>
					<input class="form-control form-control-sm" type="text" placeholder="Find a project..." name="search" id="search">
					<div>
						<ul id="l" style="display: none">
							{% for proj in projects %}
							<li>{{ username }}/{{ proj }}</li>
							{% endfor %}
						</ul>
						<p id="a"></p>
						<ul id="s">
							{% for proj in projects %}
							<li><a href="/{{ username }}/{{ proj }}">
									{{ username }}/{{ proj|truncatechars:20 }}
							</a></li>
							{% empty %}
							<li color="text-secondary">No projects!</li>
							{% endfor %}
						</ul>
					</div>
				</div>
				<div class="col m-1 p-3">
					<div class="jumbotron">
						<h1 class="display-4">Explore mchub</h1>
						<p class="lead">Find something interesting on mchub!</p>
						<hr>
						<a class="btn btn-primary btn-lg" href="/" role="button">Explore mchub</a>
					</div>
					<hr>
				</div>
			</div>
		<footer>
			<hr>
			<p class="m-1" id="footer">Build with <a href="https://www.djangoproject.com/">Django 3.1.4</a>.</p>
		</footer>
	</body>
</html>
